import React from 'react'
import {
  Form,
  Button,
  Upload,
  Input
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { addBannerReq } from '@/service/banner'
import { history } from 'umi'
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const normFile = (e: any) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

const BannerAdd = () => {
  const onFinish = (values: any) => {
    const img = values.upload[0].thumbUrl
    const { link, alt } = values
    console.log('Received values of form: ', img);
    // 上传轮播图
    addBannerReq({ link, alt, img }).then(() => {
      // 上传完成跳转至列表页面
      history.push('/banner/list')
    })
  };

  return (
    <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      initialValues={{
        'link': '',
        'alt': '',
        'img': ''
      }}
    >
      <Form.Item
        name="link"
        label="link"
      >
        <Input size="large" placeholder="跳转的链接地址" />
      </Form.Item>
      <Form.Item
        name="alt"
        label="alt"
      >
        <Input size="large" placeholder="提示信息" />
      </Form.Item>
      <Form.Item
        name="upload"
        label="上传图片"
        valuePropName="img"
        getValueFromEvent={normFile}
      >
        <Upload name="banner"  listType="picture">
          <Button icon={<UploadOutlined />}>Click to upload</Button>
        </Upload>
      </Form.Item>


      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
        <Button type="primary" htmlType="submit">
          添加
        </Button>
      </Form.Item>
    </Form>
  );
}

export default BannerAdd
